<template>
  <view class="container">
    <view  class="content">
      <view class="section-1">
        <template v-if="orderType == 'takein'">
          <up-cell-group :border="false">
            <up-cell :border="false" title="xx奶茶店" isLink center></up-cell>
          </up-cell-group>
        </template>

        <template v-else>
          <up-cell-group :border="false">
            <up-cell
              title="观澜路30号102室"
              isLink
              label="陈xx  先生 18211111111 "
              :border="false"
              center
            ></up-cell>
          </up-cell-group>
        </template>
        <template v-if="orderType != 'takein'">
          <up-cell-group>
            <up-cell
              title="取餐时间"
              :border="false"
              isLink
              value="立即用餐"
              center
            ></up-cell>
            <up-cell title="联系电话" center :border="false">
              <template #value>
                <u--input
                  inputAlign="right"
                  placeholder="请输入手机号码"
                  value="18666600000"
                  border="none"
                />
              </template>
            </up-cell>
          </up-cell-group>
        </template>
        <template v-else>
          <up-cell-group>
            <up-cell
              title="预计送达时间"
              isLink
              value="15:18"
              label="如需备注，请修改下方订单备注"
              center
              :border="false"
            ></up-cell>
          </up-cell-group>
        </template>
      </view>
      <!-- 购物车列表 begin -->
      <view class="section-2">
        <view class="cart d-flex flex-column">
          <view class="shop" v-for="(item, index) in cart" :key="index">
            <view class="w-100 d-flex flex-column">
              <view class="d-flex align-items-center mb-10">
                <view class="name-and-props overflow-hidden">
                  <view class="text-color-base font-size-lg">
                    {{ item.name }}
                  </view>
                </view>
                <view
                  class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg"
                >
                  <view>x{{ item.number }}</view>
                  <view>￥{{ item.price }}</view>
                </view>
              </view>
              <view class="text-truncate font-size-base text-color-assist">
                {{ item.props_text }}
              </view>
            </view>
          </view>
          <!-- <up-divider ></up-divider> -->
          <template v-if="orderType == 'takeout'">

			<up-cell-group>
				<up-cell
					@click="goToPackages"
					title="包装费"
					isLink
					value="￥ 12.00"
					center
					:border="false"
				></up-cell>
				<up-cell
					@click="goToPackages"
					title="配送费"
					isLink
					value="￥ 12.00"
					center
					:border="false"
				></up-cell>
			</up-cell-group>
          </template>
        </view>

        <up-cell-group>
          <up-cell
            @click="goToPackages"
            title="优惠券"
            isLink
            value="超值购买优惠券大礼包"
            center
            :border="false"
          ></up-cell>
        </up-cell-group>

        <view class="total-box">
          <view>总计￥{{ total }},实付</view>
          <view class="font-size-extra-lg font-weight-bold"
            >￥{{ amount }}</view
          >
        </view>
      </view>
      <!-- 购物车列表 end -->
      <view
        class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
        style="padding: 20rpx 0"
      >
        <view class="iconfont iconhelp line-height-100"></view>
        <view>优惠券不与满赠、满减活动共享</view>
      </view>
      <!-- 支付方式 begin -->
      <view class="payment">
        <view last :hover="false">
          <u--text text="支付方式" margin="10rpx 0"></u--text>
        </view>
        <up-cell-group>
          <up-cell
            @click="goToPackages"
            title="微信支付"
            center
            :border="false"
          >
            <template #icon>
              <image
                src="/static/images/pay/wx_pay.png"
                class="payment-icon"
              ></image>
            </template>
            <template #right-icon>
              <up-icon name="circle-filled" color="#f0ad4e" size="24"></up-icon>
              <!-- <up-radio-group v-model="value">
                <up-radio
                  shape="circle"
                  disabled
                  activeColor="#f0ad4e"
                ></up-radio>
              </up-radio-group> -->
            </template>
          </up-cell>
        </up-cell-group>
      </view>
      <!-- 支付方式 end -->

      <!-- 备注 begin -->
      <view class="payment">
        <up-cell-group :border="false">
          <up-cell
            @click="goToRemark"
            title="备注"
            isLink
            value="点击填写备注"
            center
            :border="false"
          ></up-cell>
        </up-cell-group>
      </view>
      <!-- 备注 end -->
    </view>

    <!-- 付款栏 begin -->
    <view
      class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white"
    >
      <view class="font-size-sm" style="margin-left: 20rpx">合计：</view>
      <view class="font-size-lg flex-fill">￥{{ amount }}</view>
      <view class="play-btn" style="padding: 0 60rpx" @tap="submit">
        付款
      </view>
    </view>

    <!-- 付款栏 end -->

    <up-modal
      confirmColor="#f0ad4e"
      :show="ensureAddressModalVisible"
      title="请再次确认下单地址"
    >
      <view class="slot-content">
        <view
          class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20"
        >
          <view>陈慧 女士 </view>
          <view>1221111111 </view>
        </view>
        <view class="address-box">
          <view>
			<u--text text="龙华区观澜2111路120室" type="info" margin="0 10rpx 0 0" size="14"></u--text>
		  </view>
          <view>
            <u-button
              type="warning"
              size="mini"
              plain
              class="change-address-btn"
            >
              修改地址
            </u-button></view
          >
        </view>
      </view>
    </up-modal>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import listCell from '@/components/list-cell/list-cell'
// import modal from '@/components/modal/modal'
// import orders from '@/api/orders'

export default {
  components: {
    // listCell,
    // modal
  },
  data() {
    return {
      cart: [],
      form: {
        remark: "",
      },
      ensureAddressModalVisible: false,
      listCell: [],
      orderType: "takeout",
      cart: [
        { name: "珍珠奶茶", number: "100", price: "10.00" },
        { name: "珍珠奶茶", number: "100", price: "10.00" },
        { name: "珍珠奶茶", number: "100", price: "10.00" },
      ],
    };
  },
  computed: {
    // ...mapState(['orderType', 'address', 'store']),
    // total() {
    // 	return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
    // },
    // amount() {
    // 	return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
    // }
  },
  onLoad(option) {
    const { remark } = option;
    //this.cart = uni.getStorageSync("cart");
    remark && this.$set(this.form, "remark", remark);
  },
  methods: {
    // ...mapMutations(['SET_ORDER']),
    goToRemark() {
      uni.navigateTo({
        url: "/pages/remark/remark?remark=" + this.form.remark,
      });
    },
    chooseAddress() {
      uni.navigateTo({
        url: "/pages/address/address?is_choose=true&scene=pay",
      });
    },
    goToPackages() {
      uni.navigateTo({
        url: "/pages/packages/index",
      });
    },
    submit() {
      if (this.orderType == "takeout") {
        this.ensureAddressModalVisible = true;
      } else {
        this.pay();
      }
    },
    pay() {
      uni.showLoading({ title: "加载中" });
      //测试订单
      let order = this.orderType == "takein" ? orders[0] : orders[1];
      order = Object.assign(order, { status: 1 });
      this.SET_ORDER(order);
      uni.removeStorageSync("cart");
      uni.reLaunch({
        url: "/pages/take-foods/take-foods",
      });
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
 // height: 100%;
  //margin-bottom: 200rpx;
  .content{
	height: 100%;
	margin-bottom: 200rpx;
	box-sizing: border-box;
	//background-color: red;
  }
}

// .arrow {
//   width: 50rpx;
//   height: 50rpx;
//   position: relative;
//   margin-right: -10rpx;
// }

.location {
  .store-name {
    // font-size: $font-size-lg;
  }

  .iconfont {
    font-size: 50rpx;
    line-height: 100%;
    // color: $color-primary;
  }
}

.section-1 {
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  .contact {
    .contact-tip {
      margin-left: 10rpx;
      // border: 2rpx solid $color-primary;
      padding: 6rpx 10rpx;
      // color: $color-primary;
    }
  }
}

.section-2 {
  background: #fff;
 // padding: 20rpx;
  border-radius: 20rpx;
  .name-and-props {
    width: 65%;
  }
}

.payment {
  margin-bottom: 30rpx;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  .disabled {
    // color: $text-color-grey;
  }

  .payment-icon {
    font-size: 44rpx;
    margin-right: 10rpx;
    width: 60rpx;
    height: 60rpx;
  }

  .checkbox {
    font-size: 36rpx;
    margin-left: 10rpx;
  }

  .checked {
    color: $uni-color-primary;
  }
}

.pay-box {
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  height: 100rpx;
}



.play-btn {
  background-color: #f0ad4e;
  color: #fff;
  height: 100%;
  line-height: 100rpx;
}
.address-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.slot-content{
	width: 100%;
}

.shop{
	padding: 20rpx 30rpx;
}
.total-box{ display: flex;
	justify-content: flex-end;
	padding: 30rpx;}
</style>
